<template>
    <div id="statistics">
        <div class="box">
            <div class="top">
                <el-button @click="FullScreen">全屏</el-button>
            </div>
        <div id="cover" ref="cover">
            <div class="middle">
                <div class="left">
                    <div class="user">
                        <el-avatar :size="100" :src="user.userInfo.value.headimgurl" style="margin-left:50px;min-width:100px;">
                        </el-avatar>
                        <div class="user_info">
                            <div class="user_name" style="margin-bottom:15px">{{user.userInfo.value.nickname}}</div>
                            <div class="user_id">web高级开发攻城狮</div>
                            </div>
                            <div class="sz">
                                <svg class="icon" aria-hidden="true" style="font-size:30px;align-self:flex-start;cursor:pointer;" @click="jumpmine">
                                    <use xlink:href="#icon-xitongshezhi"></use>
                                </svg>
                            </div>
                    </div>
                    <div class="calendar">  
                        <div class="header">日历</div>
                        <el-config-provider :locale="locale">
                            <el-calendar v-model="value"  />
                        </el-config-provider>
                    </div>
                </div>
                <div class="right">
                    <div class="right_top">
                        <div class="right_top_left">
                            <div class="morning">早上好</div>
                            <div class="weather">南京天气好热♨️</div>
                        </div>
                        <div class="notice">通知公告</div>
                    </div>
                    <div class="right_bottom"></div>
                </div>
            </div>
            <div class="bottom"></div>
        </div>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import useUser from '../../../store/user.js'
import { useRouter } from 'vue-router'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
let locale =ref(zhCn)
const value = ref(new Date())
let router = useRouter()
let user = useUser()
   let cover = ref(null)
   let FullScreen = () =>{
    // console.log(cover.value);
    // console.log(user.userInfo.value.headimgurl);
    cover.value.requestFullscreen()
    
  }
  let jumpmine = () =>{
    router.push('/mine')
  }
</script>
<style scoped>
   #statistics{
       width:100%;
       height:100%;
       background-color: #fff;
   }
   .box{
       width: 100%;
       height: 100%;
       display: flex;
       flex-direction: column;
   }
    .top{
         width: 100%;
         height: 60px;
         /* background-color: #aaa; */
         display: flex;
         justify-content: center;
         align-items: center;
    }
    .middle{
        width: 100%;
        height: 520px;
        /* background: #ccc; */
        /* padding: 10px; */
        border-radius: 34px;
        display: flex;
        background: #232526;  /* fallback for old browsers */
        background: -webkit-linear-gradient(to right, #414345, #232526);  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to right, #414345, #232526); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    }
    .left{
        width: 30%;
        height: 100%;
        /* background-color: #aaa; */
        display: flex;
        flex-direction: column;
    }
    .user{
        width: 100%;
        height: 40%;
        background-color:white;
        border-radius: 25px;
        margin: 10px 0 10px 10px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        
    }
    .calendar{
        width: 100%;
        height: 60%;
        background-color:white;
        border-radius: 25px;
        margin: 0 0 10px 10px;
    }
    .right{
        width: 70%;
        height: 100%;
        /* background-color: #bbb; */
    }
    .right_top{
        width: 100%;
        height: 50%;
        /* background-color: #ddd; */
        display: flex;
    }
    .right_top_left{
        width: 40%;
        height: 100%;
        /* background: red; */
        display: flex;
        flex-direction: column;
    }
    .morning{
        width: 92.5%;
        height: 50%;
        background-color:white;
        border-radius: 25px;
        margin: 10px 0 10px 20px;
        text-align: center;
    }
    .weather{
        width: 92.5%;
        height: 50%;
        background-color:white;
        border-radius: 25px;
        margin: 0 0 10px 20px;
        text-align: center;
    }
    .notice{
        width: 59%;
        height: 92.5%;
        background-color:white;
        border-radius: 25px;
        margin: 10px 0 10px 0;
        text-align: center;
    }
    .right_bottom{
        width: 97%;
        height: 48%;
        background-color:white;
        border-radius: 25px;
        margin: 0 0 10px 20px ;

    }
    .bottom{
        width: 100%;
        height: calc(100% - 580px);
        background-color: white;
    }
    .sz{
        height: 100%;
        width: 80px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-end;
    }
    :deep(.el-calendar-day){
        padding: 0 20px 0 20px;
        height: 20px ;
    }
    :deep(.el-calendar){
        width: 100%;
        height: 50%;
        border-radius: 25px;
        text-align: center;
    }
    .header{
        width: 100%;
        height: 30px;
        text-align: center;
        line-height: 30px;
        background-color: #2aac98;
        color:white;
        border-top-left-radius: 25px;
        border-top-right-radius: 25px;
    }
    :deep(.el-calendar__header){
        height: 21px !important;
        line-height: 30px;
        
    }
</style>